<%@ page import="org.example.model.UserInfo" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/3
  Time: 上午10:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--进入此页面 需要用户必须登录 不登录不允许 进入页面--%>
<%--鉴权操作--%>
<%
//        从session中获取的用户信息，进行校验
        UserInfo userInfo=(UserInfo) session.getAttribute("userInfo");
    if (userInfo==null) {
        //鉴权失败，发回登录页面 去登录
        response.sendRedirect(request.getContextPath()+"/index.jsp");
    }
%>
<html>
<head>
    <title>教务信息管理</title>
    <%--    引入easyui框架--%>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/demo/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.8.6/locale/easyui-lang-zh_CN.js"></script>

</head>
<body class="easyui-layout">
<%--页头 顶部--%>
<div region="north" style="height: 80px;background: #E0ECFF">

<%--    左侧logo 系统的信息名 靠左布局 float:left属性--%>
    <div style="float: left;">
        <h1>教务信息管理系统</h1>
    </div>
<%--    右侧要显示当前的用户信息  数据来源于jsp session对象中存储的用户信息--%>
    <div style="float: right;padding-top: 50px;padding-right: 20px">
<%--        显示信息--%>
        <span style="color: red">当前用户:${sessionScope.userInfo.getUserName()}</span>
    </div>
</div>


<%--页面主体部分--%>
<div region="center">
    <%--    标签栏--%>
    <div class="easyui-tabs" fit="true" border="false" id="tabs">
        <%--        标签页--%>
        <div title="首页">
            <div align="center" style="padding-top: 100px">
                <span style="font-size: 60px;color: red">
                    欢迎使用教务系统</span>
            </div>
        </div>
    </div>
</div>
<%--    侧边栏--%>
<div region="west" style="width: 200px" title="导航菜单" split="true">
    <ul id="tree">

    </ul>
</div>

<%--    底部版权信息栏--%>
<div region="south" style="height: 25px"
     align="center">
    版权所有@CopyRight 九江学院
</div>

</body>

        <%--编写JS脚本代码 初始化我们的菜单项--%>
        <script>

            $(function(){

                var $path='<%=request.getContextPath()%>';
                //1.初始化菜单Tree数据
                var treeData=[
                    {
                        text:'菜单栏',
                        children:[
                            {
                                text:'班级信息管理',
                                //实际地址  attributes 携带的节点属性
                                attributes:{
                                    //自定义属性
                                    <%--url:<%request.getContextPath();%>'/classInfoManage.jsp'--%>
                                    url:$path+'/classInfoManage.jsp'
                                }
                            },
                            {
                                text:'学生信息管理'
                            }
                        ]
                    }
                ]
                //2.树化 我们的菜单
                $('#tree').tree({
                    //树化数据源
                    data:treeData,
                    //树行级显示
                    linse:true,
                    //菜单的点击事件
                    onClick:function(node){
                        alert(node.text)
                        //菜单里点击事件后 主动的切换标签页
                        openTab(node.text,node.attributes.url)
                    }
                })
                //3.菜单与页面主体部分联动
                //3.1菜单栏的切换与主题页面内容的更换
                /*
                *
                * @param text 菜单栏名称
                * @param url 切换到那个功能页面
                * 列如点击学生信息管理，切换到学生信息页
                 */
                function openTab(text,url){
                    //切换标签页
                    //切换标签页，已经存在的页面不需要重新登录
                    if($('#tabs').tabs("exists",text)){
                        $('#tabs').tabs('select',text);
                    }else{
                        //标签页替换的内容,实际地址需要内嵌到页面标签内
                        /*
                        *iframe 内嵌入网页
                         */
                        var content="<iframe " +
                            "frameborder='0' " +
                            "scrolling='auto' " +
                            "style='width:100%;height:100vh' " +
                            "src="+url+"></iframe>";
                        // var content='<span>'+text+'</span>'
                        //当前的标签栏 不存在当前标签，那么就新增标签
                        $('#tabs').tabs('add',{
                            title:text,
                            //标签可关闭
                            closable:"true",
                            //切换后 标签页替换内容 内容需要替换成我们实际的业务
                            content:content
                        })
                    }
                }
            })



        </script>
</html>
